<template>
  <div id="personalCenter">
    <div class="bank">
      <div class="title">
        <img src="../../assets/img/zhuangshi.png" alt />
        <h4>钱包账户</h4>
      </div>
      <div
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        class="bank-add"
      >
        <ul v-if="show">
          <li>
            <p>OTC钱包</p>
            <p>{{Number(list[0].available)+Number(list[0].freeze)}} USDT</p>
          </li>
          <li>
            <p>秒合约钱包</p>
            <p>{{list[1].balance}} USDT</p>
          </li>
          <li>
            <p>合约钱包</p>
            <p>{{Number(list[2].availableAmount)+Number(list[2].freezeAmount)}} USDT</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="bank">
      <div class="title">
        <img src="../../assets/img/zhuangshi.png" alt />
        <h4>钱包记录</h4>
      </div>
      <el-table v-loading="listLoad"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading" :data="tableList" stripe style="width: 100%">
          <el-table-column prop="id" label="流水号" min-width="120"></el-table-column>
          <el-table-column prop="" label="类型" min-width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.type==1">OTC入金</span>
              <span v-if="scope.row.type==2">OTC卖币冻结</span>
              <span v-if="scope.row.type==3">OTC匹配成功扣除冻结</span>
              <span v-if="scope.row.type==4">OTC匹配失败释放冻结</span>
              <span v-if="scope.row.type==5">邀请用户糖果</span>
              <span v-if="scope.row.type==11">秒合约转入</span>
              <span v-if="scope.row.type==12">转出到秒合约</span>
              <span v-if="scope.row.type==41">充币成功</span>
              <span v-if="scope.row.type==46">提币发出申请</span>
              <span v-if="scope.row.type==47">提币申请驳回</span>
              <span v-if="scope.row.type==48">提币成功</span>
              <span v-if="scope.row.type==49">提币充值，内部转账</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="可用" min-width="100">
            <template slot-scope="scope">
              <span>{{scope.row.beforeAvailable}}</span>/<span>{{scope.row.afterAvailable}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="冻结" min-width="100">
            <template slot-scope="scope">
              <span>{{scope.row.beforeFreeze}}</span>/<span>{{scope.row.afterFreeze}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="时间" min-width="100"></el-table-column>
        </el-table>
        <el-pagination
        @current-change="nextPage"
        style="text-align:center;margin-top:20px;"
        small
        layout="prev, pager, next"
        :total="total"
        :page-size="8"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { userWalletList, userWalletRecord } from "../../api/api";
import { mapState } from "vuex";
import qs from "qs";
export default {
  name: "personalCenter",
  data() {
    return {
      list: [],
      listType: "秒合约钱包",
      show: false,
      loading: false,
      tableList:[],
      page:1,
      total:10,
      listLoad:false
    };
  },
  computed: {
    ...mapState(["token"]),
  },
  created() {
    // console.log(this.$route.query)
    this.getWallet();
    this.getList();
  },
  methods: {
    getWallet() {
      this.loading = true;
      var params = {
        token: this.token,
      };
      userWalletList(params).then((res) => {
        this.list = res.data.data;
        this.show = true;
        this.loading = false;
      });
    },
    getList(){
      this.listLoad = true
      var params = {
        page :this.page,
        rows:8,
        token:this.token
      }
      userWalletRecord(params).then(res=>{
        this.listLoad = false
        this.tableList = res.data.data
        this.total = res.data.count
      })
    },
    nextPage(val) {
      this.page = val;
      this.getList();
    },
  },
};
</script>
<style lang='less' scope>
// ----------------------
#personalCenter {
  .title {
    position: relative;
    background-color: #fff;
    padding: 10px 0;
    > img {
      position: absolute;
      top: 4px;
    }
    > h4 {
      margin-left: 50px;
    }
  }
  .bank {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #fff;
    .bank-add {
      padding: 10px;
      > ul {
        display: flex;
        li {
          margin-right: 50px;
          text-align: center;
          display: inline-block;
          width: 200px;
          padding: 10px 0;
          > p:nth-child(1) {
            font-size: 14px;
            margin-bottom: 10px;
            color: #a1b1b0;
          }
        }
        li:nth-child(1) {
          background-color: #fffaf4;
          > p:nth-child(2) {
            color: #ff8f4e;
          }
        }
        li:nth-child(2) {
          background-color: #f3faff;
          > p:nth-child(2) {
            color: #557fb7;
          }
        }
        li:nth-child(3) {
          background-color: #f3fffd;
          > p:nth-child(2) {
            color: #0b9288;
          }
        }
      }
    }
  }

  // ----------------------
}
</style>